import React, {Component} from 'react'
import {Button, NavBar, Icon} from 'antd-mobile'
import { createForm } from 'rc-form'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import DefaultLayout from '../../layouts/default_layout'
import Register from './register'
import LoginForm from './login_form'

@createForm()
class Login extends Component {

  state = {
    current: 'login'
  }

  render() {
    const {current} = this.state
    return (
      <DefaultLayout
        header={
          <NavBar
            onLeftClick={e => {
              this.setState({ current: 'login' })
            }}
            rightContent={
              current === 'login'
                ? <Button
                    type={'primary'}
                    onClick={e => {
                      this.setState({ current: 'register' })
                    }}
                    size={'small'}
                  >去注册</Button>
                : ''
            }
            icon={
              current === 'register' ?
                <Icon
                  type="left" /> : ''
            }
          >
            {
              current === 'login' ? '用户登录' : '用户注册'
            }
          </NavBar>
        }
      >
        <TransitionGroup
          className={'page-animation-container router-in-transition'}
          childFactory={child => {
            return React.cloneElement(child, {
              classNames: current === 'login' ? 'backward' : 'forward'
            })
          }}
        >
          {
            current === 'login' ?
              <CSSTransition
                key={'login'}
                timeout={300}
              >
                <LoginForm />
              </CSSTransition>
              :
              <CSSTransition
                key={'register'}
                timeout={300}
              >
                <Register />
              </CSSTransition>
          }
        </TransitionGroup>
      </DefaultLayout>
    )
  }
}

export default Login
